<template>
	<div class="guidePage" @click.stop="jumpUrl">
		<div class="topImageBox">
			<img :src="ldPic" alt="" />
		</div>
		<div class="tipBox">
			Register to
			<span>Withdraw</span>
			&gt;
		</div>
		<div class="bottomBox">
			<div class="submitButton">
				INSTALL TO GET
				<div class="SmallHandS"></div>
			</div>
			<div class="infoBox">
				<img src="@/assets/images/HomePage/icon11.png" alt="" />
			</div>
			<div class="scrollArea">
				<div class="topContent">
					<i></i>
					Lucky winners
					<i></i>
				</div>
				<vue-seamless-scroll :data="listData" class="warp" :class-option="classOption" style="font-size: 14px">
					<ul class="item">
						<li v-for="(item, index) in listData" :key="index" style="height: 30px; line-height: 30px">
							<span class="title" v-text="item.accountNumber"></span>
							<span class="date" v-text="'successfully received 1 min ago'"></span>
						</li>
					</ul>
				</vue-seamless-scroll>
			</div>
		</div>
		<div class="appInfoBox">
			<div class="AppLogo">
				<img :src="appLogo" alt="" />
			</div>
			<div class="AppName">{{ appName }}</div>
			<div class="downBtn">Install</div>
		</div>
	</div>
</template>

<script>
import vueSeamlessScroll from 'vue-seamless-scroll'
export default {
	name: 'GuidePage',
	components: {
		vueSeamlessScroll,
	},
	data() {
		return {
			classOption: {
				singleHeight: 30,
			},
			listData: [
				{
					accountNumber: '988*****56',
				},
				{
					accountNumber: '897*****68',
				},
				{
					accountNumber: '712*****53',
				},
				{
					accountNumber: '712*****08',
				},
				{
					accountNumber: '897*****48',
				},
				{
					accountNumber: '712*****65',
				},
				{
					accountNumber: '988*****66',
				},
				{
					accountNumber: '897*****12',
				},
				{
					accountNumber: '712*****83',
				},
			],
			isClicked: false, // 用于禁用按钮
			timer: null, // 定时器ID
		}
	},
	computed: {
		ldPic() {
			const { query } = this.$route
			return query?.ldPic || require('@/assets/images/HomePage/10023.gif')
		},
		appLogo() {
			return window.appLogo
		},
		appName() {
			return window.appName
		},
	},
	methods: {
		// 老的下载地址
		jumpUrl() {
			if (this.isClicked) return
			let clickid = this.$route.query.clickid || ''
			let gaid = '{gaid}'
			let install_callback = encodeURIComponent(`${window.callbackUrl}?subid_short=${clickid}`)
			let redirect = encodeURIComponent(window.redirectUrl)
			let targetUrl = `${window.appDownUrl}?gps_adid=${gaid}&campaign=0605&clickid=${clickid}&install_callback=${install_callback}&redirect=${redirect}`
			if (!targetUrl) return
			this.isClicked = true
			this.timer = setTimeout(() => {
				this.isClicked = false
			}, 10000)
			window.location.href = targetUrl
		},
	},
	beforeDestroy() {
		if (this.timer) {
			clearTimeout(this.timer)
		}
	},
}
</script>

<style lang="scss" scoped>
.guidePage {
	width: 100%;
	height: 100%;
	background: #ffffff;
	img {
		height: 100%;
		width: 100%;
	}
	.topImageBox {
		width: 100%;
		height: 164px;
		text-align: center;
		padding-top: 18px;
		box-sizing: border-box;
		img {
			height: 100%;
			width: 80%;
		}
	}

	.tipBox {
		height: 30px;
		width: 68%;
		border-top: 1px dashed;
		display: flex;
		align-items: center;
		justify-content: center;
		margin: 0 auto;
		text-align: center;
		> span {
			color: red;
			margin: 0 7px;
			font-weight: 500;
		}
	}

	.bottomBox {
		width: 100%;
		height: calc(100% - 195px);
		background: #3ab658;
		padding-top: 20px;
		box-sizing: border-box;
		display: flex;
		flex-direction: column;
		align-items: center;

		.submitButton {
			width: calc(100% - 36px);
			height: 40px;
			background: linear-gradient(to top, #f77401, #fdc902);
			border-radius: 24px;
			display: flex;
			align-items: center;
			justify-content: center;
			font-size: 20px;
			color: #ffffff;
			margin: 0 auto;
			margin-bottom: 30px;
			position: relative;
			.SmallHandS {
				width: 58px;
				height: 68px;
				z-index: 2;
				right: 60px;
				top: 8px;
				position: absolute;
				pointer-events: none;
				background: url('@/assets/images/HomePage/10002.png');
				background-size: 100%;
				transform-origin: 100% 100%; /* 右下角为旋转中心 */
				animation: wave 0.5s ease-in-out infinite;
			}

			@keyframes wave {
				0% {
					transform: rotate(30deg);
				}
				50% {
					transform: rotate(0deg);
				}
				100% {
					transform: rotate(30deg);
				}
			}
		}

		.infoBox {
			width: calc(100% - 36px);
			margin-bottom: 28px;
			height: 115px;
			img {
				width: 100%;
				height: 100%;
			}
		}

		.scrollArea {
			width: calc(100% - 36px);
			margin: 0 auto;
			.topContent {
				display: flex;
				align-items: center;
				gap: 10px;
				color: #ffffff;
				font-size: 16px;
				font-weight: 600;
				justify-content: center;
				margin-bottom: 12px;
				i {
					background: #ffffff;
					width: 88px;
					display: block;
					height: 1px;
				}
			}
			.warp {
				height: 150px;
				width: 100%;
				margin: 0 auto;
				overflow: hidden;
				color: #ffffff;
				// font-size: 14px;
				font-weight: 600;
				ul {
					list-style: none;
					padding: 0;
					margin: 0 auto;
					li,
					a {
						display: block;
						// height: 30px;
						// line-height: 30px;
						display: flex;
						gap: 8px;
						justify-content: center;
						// font-size: 15px;
					}
				}
			}
		}
	}
	.appInfoBox {
		position: fixed;
		bottom: 0;
		left: 0;
		width: 100%;
		display: flex;
		align-items: center;
		padding: 6px 18px;
		box-sizing: border-box;
		background: #00000052;
		.AppLogo {
			width: 40px;
			height: 40px;
		}
		.AppName {
			font-size: 18px;
			color: #ffffff;
			margin-left: 6px;
		}
		.downBtn {
			margin-left: auto;
			padding: 6px 20px;
			box-sizing: border-box;
			background: linear-gradient(to top, #f77401, #fdc902);
			border-radius: 14px;
			display: flex;
			align-items: center;
			justify-content: center;
			font-size: 16px;
			color: #ffffff;
		}
	}
}
</style>
